<template>
	<view>
		<view v-if="isLogin">
			<view class="head-container">
				<image :src="avatar" mode="aspectFill" class="img-avatar"></image>
				<view class="info-container">
					<view class="nick-container">
						<text class="txt-nick">{{nickName + "-[" + uTypes[type-1] + "]"}}</text>
						<image :src="badges[type-1]" mode="widthFix" class="img-badge"></image>
					</view>
					<text class="txt-user">{{userName +":" + email}}</text>
				</view>
			</view>
			<text class="iconfont icon-nan txt-logout" @click="clickLogout"></text>
			<view class="data-container">
				<!-- 点赞的文章，使用滚动视图实现 -->
				<view class="data-title" @click="clickSwtich(0)">
					<text class="data-title-name">我点赞的{{goodCount}}篇文章</text>
					<text :class="status[0].open?'iconfont icon-nv ics-arrow' : 'iconfont icon-nan ics-arrow'"></text>
				</view>

				<scroll-view scroll-x v-if="status[0].open" class="scroll-scroll" scroll-with-animation="true"
					@scrolltolower="getMoreBlogs">
					<view class="scroll-item" v-for="(blog, index) in goodBlogs" :key="blog.id"
						@click="clickGoBlog(blog.id)">
						<image :src="blog.picture" mode="aspectFill"></image>
						<text>{{blog.title}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="data-container">
				<view class="data-title" @click="clickSwtich(1)">
					<text class="data-title-name">我管理的{{categories.length}}个类别数据</text>
					<text :class="status[1].open?'iconfont icon-nv ics-arrow' : 'iconfont icon-nan ics-arrow'"></text>
				</view>
				<view v-if="status[1].open" class="category-container">
					<view class="category-item" v-for="(c ,index) in categories" :key="c.id">
						<text class="category-name" @click="clickUpdate(c.id, c.name)">{{c.name}}</text>
						<text :class="c.count==0?'btn-category':'num-category'"
							@click="c.count==0?clickDelete(c.id, c.name):''">{{c.count==0?'X':c.count}}</text>
					</view>
					<view class="category-item">
						<text class="iconfont icon-faxian txt-add" @click="clickAdd"></text>
					</view>
				</view>
			</view>
			<!-- 管理类别数据，是u文本标签 -->
		</view>
		<login-dialog ref="login" @login="afterLogin"></login-dialog>
		<dialog-shell ref="shell_update" title="更新类别名称" @confirm="confirmUpdate">
			<view style="margin: 10rpx;">
				<input type="text" :value="oldValue" @input="inputGetValue" placeholder="请输入新的名称"
					style="padding-left: 15rpx;" />
			</view>
		</dialog-shell>
		<dialog-shell ref="shell_add" title="添加类别名称" @confirm="comfirmAdd">
			<view style="margin: 10rpx;">
				<input type="text" focus @input="inputGetValue" placeholder="请输入新的名称" style="padding-left: 15rpx;" />
			</view>
		</dialog-shell>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				avatar: '',
				userName: '',
				email: '',
				nickName: '',
				uTypes: ['管理员', '认证博主', '博客会员'],
				type: -1,
				badges: ['../../static/icons/badage0.png', '../../static/icons/badge1.png',
					'../../static/icons/badge2.png'
				],
				status: [{
					open: false
				}, {
					open: false
				}, {
					open: false
				}, {
					open: false
				}],
				goodCount: -1,
				categories: [],
				goodIds: [],
				goodBlogs: [],
				page: 0,
				size: 2,
				oldValue: '',
				newValue: '',
				updateId: ''
			}
		},
		mounted() {
			if (getApp().globalData.token.length == 0) {
				this.$refs.login.show()
			}
		},
		onLoad() {
			this.$noti.add(this.$params.$noti_login_status, this.afterLogin, this)
			this.isLogin = getApp().globalData.token.length > 0
			if (this.isLogin) {
				this.initUser()
			}
			this.getLocalGood()
		},
		onShow() {
			this.loadData()
		},
		onUnload() {
			this.$noti.remove(this.$params.noti_login_status, this)
		},
		methods: {
			clickDelete(id, name){
						let url = this.$params.host + this.$params.action_category_del + id
						let data = {
							token: getApp().globalData.token
						}
						uni.showModal({
							title: '确认',
							content: '确认删除'+name+'吗？',
							showCancel: false,
							cancelText: '在想想',
							confirmText: '删除',
							success: res => {
								if(res.confirm){
									this.$req.del(url, data, res =>{
										console.log(res)
										if(res.data.success){
											this.categories = this.categories.filter(c => c.id != id)
										} else {
											uni.showToast({
												title: res.data.data,
												icon: 'none'
											})
										}
									})
								}
							},
							fail: () => {},
							complete: () => {}
						});
					},
					clickAdd(){
					this.$refs.shell_add.showDialog()	
					},
					comfirmAdd(){
						if (this.newValue.trim().length == 0) {
							uni.showToast({
								title: '请输入新的类别名称',
								icon: 'none'
							})
							return
						}
						let url = this.$params.host + this.$params.action_category_add
						let data = {
							token: getApp().globalData.token,
							name: this.newValue
						}
						this.$req.request(url, data, 'POST').then(res => {
							console.log(res)
							if (!res.success) {
								uni.showToast({
									title: res.message
								})
								return
							}
							let item = {
								id: res.data.id,
								name: res.data.name,
								count: 0,
								
							}
							this.categories.push(item)
							this.newValue = ''
						}).catch(err => {
							console.log(err)
							this.newValue = ''
						})
						
					},
					confirmUpdate() {
						if (this.newValue.trim().length == 0) {
							uni.showToast({
								title: '请输入新的类别名称',
								icon: 'none'
							})
							return
						}
						let url = this.$params.host + this.$params.action_category_put + this.updateId
						console.log(url)
						let data = {
							token: getApp().globalData.token,
							name: this.newValue
						}
						this.$req.request(url, data, 'PUT').then(res => {
							console.log(res)
							if (!res.success) {
								uni.showToast({
									title: res.message
								})
								return
							}
							let item = res.data
							this.categories.forEach(c => {
								if (c.id == item.id) {
									c.name = item.name
								}
							})
							this.newValue = ''
						}).catch(err => {
							console.log(err)
						})
					},
			clickUpdate(id, name) {
				this.oldValue = name
				this.updateId = id
				this.$refs.shell_update.showDialog()
			},
			inputGetValue(e) {
				this.newValue = e.detail.value
			},
			afterLogin() {
				if (this.isLogin) {
					return
				}
				this.initUser()
				this.loadData()
			},
			initUser() {
				let app = getApp()
				this.isLogin = app.globalData.token.length > 0
				this.avatar = this.$params.host + app.globalData.avatar
				this.userName = app.globalData.userName
				this.email = app.globalData.email
				this.nickName = app.globalData.nickName
				this.type = app.globalData.type
			},
			loadData() {
				this.page = 0
				this.goodBlogs = []
				this.goodCount = -1
				this.getLocalGood()
				for (let i = 0; i < this.size; i++) {
					this.getMoreBlogs()
				}
				this.getCategories()
			},
			getCategories() {
				let url = this.$params.host + this.$params.action_categories
				this.$req.get(url, res => {
					this.categories = []
					url = this.$params.host + this.$params.action_category_count
					res.data.data.forEach(async (c) => {
						let r = await this.$req.request(url + c.id)
						if (res.data.success) {
							let category = {
								id: c.id,
								name: c.name,
								count: r.data,
							}
							this.categories.push(category)
						}
					})

				})
			},
			clickSwtich(index) {
				let now = this.status[index].open
				this.status[index].open = !now
			},
			getLocalGood() {
				let ids = uni.getStorageSync(this.$params.key_good_ids)
				if (ids) {
					this.goodIds = ids
				}
				this.goodCount = ids.length
			},
			getMoreBlogs() {
				if (this.goodCount >= 0 && this.goodBlogs.length == this.goodCount) {
					return
				}
				let url = this.$params.host + this.$params.action_top_blogs + this.goodIds[this.page++]
				this.$req.get(url, res => {
					let blog = res.data.data
					blog.picture = this.$params.host + blog.picture
					this.goodBlogs = this.goodBlogs.concat(blog)
				})
				//console.log(this.goodBlogs);
			},
			clickGoBlog(id) {
				uni.navigateTo({
					url: '../blog/blog?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickLogout() {
				let url = this.$params.host + this.$params.action_logout
				let app = getApp()
				let data = {
					token: app.globalData.token
				}
				this.$req.postQuery(url, data, res => {
					// console.log(res);
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
					if (res.data.success) {
						app.globalData.id = ''
						app.globalData.token = ''
						app.globalData.avatar = '/static/icons/default_user.png'
						app.globalData.email = ''
						app.globalData.nickName = ''
						app.globalData.userName = ''
						app.globalData.type = -1
						this.isLogin = false
						this.goodBlogs = []
						this.$refs.login.show()
						this.page = 0
						this.goodCount = -1

					}
				})
			}

		}
	}
</script>

<style>
	@import url("profile.css");
</style>